<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>千锋电影商城</title>
    <meta name="referrer" content="no-referrer" />
    <style>
        .mbox{
            width:1200px;
            margin:50px auto;
        }
        ul{
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            width:100%;
        }
        li{
            width:25%;
            box-sizing: border-box;
            padding:20px;
        }
        li a{
            display: block;
            border:1px solid #ddd;
            border-radius: 10px;
            text-decoration: none;

        }
        .one{
            width:100%;
            padding:0 20px;
            box-sizing: border-box;
        }
        li a img{
            height:260px;
            width:100%;
        }
        h2{
            color:#b3b3b3;
        }
        p{
            color:#999;
        }
    </style>
</head>
<body>
    <%- include('head',{title:'千锋电影商城'})%>

    <div class="mbox">
        <div>
            <button  onclick="location.href='/mlist?rating.average=1'">评分升序</button>
            <button  onclick="location.href='/mlist?rating.average=-1'">评分降序</button>
            <button  onclick="location.href='/mlist?year=1'" >年份升序</button>
            <button  onclick="location.href='/mlist?year=-1'">年份降序</button>
        </div>
        <div>
            <input type="text" placeholder="请输入关键字" id="keyword" >
            <button onclick="todoSearch()">点击搜索</button>
        </div>
        <ul>
        <%   result.forEach((item,index)=>{  %>
            <li>
                <a href="/detail?id=<%- item.id %>">
                    <img src="<%- item.images.small.replace(/img7/,'img3')  %>" class="mimg"  />   
                    <div class="one">
                        <h2> <%- item.title %></h2>
                        <p>年份: <%-item.year%></p>
                        <p>评分: <%-item.rating.average%></p>
                        <p>分类: <%-item.genres%></p>
                    </div>
                </a>
            </li>
        <%   })  %>
        </ul>
    </div>

    <script>
        function todoSearch(){
            var keyword = document.getElementById('keyword').value 
            window.location.href = '/mlist?keyword='+keyword
        }
    </script>
</body>
</html>